﻿<!DOCTYPE />
<html>
<head>
    <title>Query</title>
   
    <script src="../../lib/XiaoFuMap.js" type="text/javascript"></script>
     
    <script type="text/javascript">

        var map, svgLayer_point, svgLayer_line, svgLayer_polygon;
        var control = null;
        var selectLayer = "";
        function load() {
            map = new XiaoFu.Map("#MapContainer");
            $.ajax({
                url: "../../data.js",
                dataType: "json",
                success: function (data) {
                    var layer = new XiaoFu.ArcGISCacheLayer(data);
                    layer.serverUrl = "http://192.168.0.23/arcgiscache/SeverTest_jilin_0041/Layers/_alllayers/";
                    layer.picFormat = "png";
                    map.addLayer(layer);
                    svgLayer_point = new XiaoFu.SVGLayers("point");
                    map.addLayer(svgLayer_point);
                    svgLayer_line = new XiaoFu.SVGLayers("line");
                    map.addLayer(svgLayer_line);
                    svgLayer_polygon = new XiaoFu.SVGLayers("polygon");
                    map.addLayer(svgLayer_polygon);
                    control = new XiaoFu.Navigation();
                    map.addControl(control);
                    map.addEventListener("mousemove", function (eventType, data) {
                        var center = map.getCenter();
                        var extent = map.getCurrentExtent();
                        var mouseGeo = data.mouseGeoPoint;
                        var mousePoint = data.mousePoint;
                        var txt = ""
               + "<br/>鼠标点像素点 x-" + mousePoint.x + " y-" + mousePoint.y
                + "<br/>鼠标地理点 x-" + mouseGeo.x + " y-" + mouseGeo.y               
                ;
                        //showMsg(txt);

                    });  
                }
            });

//            var layer = new XiaoFu.GoogleCacheLayer("http://mt{0}.google.cn/vt/lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={1}&y={2}&z={3}&s=Gal");
//           
//            map.addLayer(layer);
//            svgLayer_point = new XiaoFu.SVGLayers("point");
//            map.addLayer(svgLayer_point);
//            svgLayer_line = new XiaoFu.SVGLayers("line");
//            map.addLayer(svgLayer_line);
//            svgLayer_polygon = new XiaoFu.SVGLayers("polygon");
//            map.addLayer(svgLayer_polygon);
//            control = new XiaoFu.Navigation();
//            map.addControl(control);
            selectLayer = $("#queryLayers")[0].value;
        };
        function query() {
            var q = new XiaoFu.Query("http://192.168.0.23/GisMapServer/query.ashx");
            q.outFields = ["gid"];
            q.layerName = selectLayer;
            q.where = $("#whereTxt").val();
            q.request(function (evt) {
                svgLayer_point.removeAll();
                svgLayer_line.removeAll();
                svgLayer_polygon.removeAll();
                var result = evt.result.resultSets;
                for (var i = 0; i < result.length; i++) {
                    var rs = result[i];
                    for (var j = 0; j < rs.records.length; j++) {
                        var geo = rs.records[j].geometry;
                        //map.viewByExtent(geo.getExtent());
                        if (geo.type == "XiaoFu.GeoPoint") {
                            var point = new XiaoFu.SVG_Point(j, "point" + j, geo.x, geo.y);

                            svgLayer_point.addChild(point);
                        }
                        else if (geo.type == "XiaoFu.GeoLine") {
                            var line = new XiaoFu.SVG_Line(j, "line" + j, geo);
                            line.stroke = "blue";
                            line.strokeWidth = 3;
                            svgLayer_line.addChild(line);
                        }
                        else {
                            var po = new XiaoFu.SVG_Polygon(j, "po" + j, geo);

                            svgLayer_polygon.addChild(po);
                        }

                    }


                }
            }, function () { });


        };
        function changeQueryLayer(select) {
            selectLayer  = select.value;
        }
        function showMsg(_msg) {
            $("#msg").html(_msg);
        }
    </script>
</head>
<body onload="load()">
    <div id="MapContainer"  style="z-index: 10000; border: 1px solid blue;   position: relative; 
        width: 1000px; height: 500px;">
      
    </div> 
    <select id="queryLayers" onchange="changeQueryLayer(this);">
        <option value="ajilin_pt">点</option>
        <option value="road_rjl_00_pl">线</option>
        <option value="djilin_pg">面</option>
    </select>
    <input type="text" id="whereTxt" />
    <input type="button" value="查询" onclick="query();"/>
    <div id="msg">
    </div>
</body>
</html>
